<!DOCTYPE html>
<html lang="en">

<head>
    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="css/ken-burns.css" rel="stylesheet" type="text/css" media="all"/> <!-- 轮播图样式 -->
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css"><!-- 图标样式 -->
    <link rel="stylesheet" type="text/css" href="./css/home.css">

    <script src="js/jquery-2.2.3.min.js"></script>
    <script src="js/jquery-scrolltofixed-min.js" type="text/javascript"></script><!-- 导航栏固定 -->
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script><!-- 过渡 -->
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery.menu-aim.js"></script> <!-- 底部导航栏 -->
    <script src="js/main.js"></script><!-- 导航栏 -->
    <script src="js/custom.js"></script>
</head>

<body>
<div id="app">
    <div class="header">
        <div class="w3ls-header">
            <div class="w3ls-header-left">
                <p>
                    <a href="#"><img style="position: relative;left: -10px; top: -1px" src="./images/shopping.png">
                        XB全新高端购物平台
                    </a>
                </p>
            </div>
            <div class="w3ls-header-right">
                <ul>
                    <li class="dropdown head-dpdn">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"
                                                                                      aria-hidden="true"></i>人名<span
                                class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="profile.html">个人中心</a></li>
                            <li><a @click="exitLogin()" href="#" @click.prevent="">注销</a></li>
                        </ul>
                    </li>
                    <li class="dropdown head-dpdn">
                        <a href="car.html" class="dropdown-toggle"><i class="fa fa-gift" aria-hidden="true"></i>购物车</a>
                    </li>
                    <li class="dropdown head-dpdn">
                        <a href="waitPay.html" class="dropdown-toggle"><i class="fa fa-credit-card-alt"
                                                                          aria-hidden="true"></i>待支付</a>
                    </li>
                </ul>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="header-two">
            <div class="container">
                <div class="header-logo">
                    <h1><a href="home.html"><span>X</span>Biao </a></h1>
                    <h6>Your stores. Your place.</h6>
                </div>
                <div class="header-search">
                    <form @submit.stop="">
                        <input v-model="goodsName" type="search" name="Search" placeholder="Search for a Product..." required="">
                        <button @click="search()" type="button" class="btn btn-default" >
                            <i class="fa fa-search" aria-hidden="true"> </i>
                        </button>
                    </form>
                </div>
                <div class="header-cart">
                    <div class="my-account">
                        <a href="javascript:;"></a>
                    </div>
                    <div class="cart">
                        <a href="car.html">
                            <button class="w3view-cart" type="submit" name="submit" value=""><i
                                    class="fa fa-cart-arrow-down" aria-hidden="true"></i></button>
                        </a>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="header-three">
            <div class="container">
                <ul class="nav nav-pills nav-justified">
                    <li><a href="#" @click="toGoodsListByType(0)">全部列表</a></li>
                    <li v-for="type in types"><a href="#" @click="toGoodsListByType(type.id)" @c>{{type.goodsType}}</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!--轮播图-->
    <div class="banner">
        <div id="kb" class="carousel kb_elastic animate_text kb_wrapper" data-ride="carousel" data-interval="6000"
             data-pause="hover">

            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="images/5.jpg" alt="" class="img-responsive"/>
                    <div class="carousel-caption kb_caption kb_caption_right">
                        <h3 data-animation="animated flipInX">Flat <span>50%</span> Discount</h3>
                        <h4 data-animation="animated flipInX">Hot Offer Today Only</h4>
                    </div>
                </div>
                <div class="item">
                    <!-- Second-Slide -->
                    <img src="images/8.jpg" alt="" class="img-responsive"/>
                    <div class="carousel-caption kb_caption kb_caption_right">
                        <h3 data-animation="animated fadeInDown">Our Latest Fashion Editorials</h3>
                        <h4 data-animation="animated fadeInUp">cupidatat non proident</h4>
                    </div>
                </div>

                <div class="item">
                    <!-- Third-Slide -->
                    <img src="images/3.jpg" alt="" class="img-responsive"/>
                    <div class="carousel-caption kb_caption kb_caption_center">
                        <h3 data-animation="animated fadeInLeft">End Of Season Sale</h3>
                        <h4 data-animation="animated flipInX">cupidatat non proident</h4>
                    </div>
                </div>

            </div>
            <!-- Left-Button -->
            <a class="left carousel-control kb_control_left" href="#kb" role="button" data-slide="prev">
                <span class="fa fa-angle-left kb_icons" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <!-- Right-Button -->
            <a class="right carousel-control kb_control_right" href="#kb" role="button" data-slide="next">
                <span class="fa fa-angle-right kb_icons" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

    <!--最新商品-->
    <div class="add-products">
        <div class="container">
            <h3 class="w3ls-title">最新商品</h3>
            <div class="add-products-row">
                <div v-for="goods in newGoodsList" class=" w3ls-add-grids">
                    <a href="#" @click="toDetail(goods)" @click.prevent="">
                        <img :src="goods.pic">
                        <p>{{goods.goodName}}<span>${{goods.price}}</span></p>
                        <span>Shop now <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>
                    </a>
                </div>
                <!--<div class=" w3ls-add-grids">-->
                    <!--<a href="goodsDetail.html">-->
                        <!--<img src="./images/img3.jpg">-->
                        <!--<p>无敌单品 <span>$20</span></p>-->
                        <!--<span>Shop now <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>-->
                    <!--</a>-->

                <!--</div>-->
                <!--<div class=" w3ls-add-grids">-->
                    <!--<a href="goodsDetail.html">-->
                        <!--<img src="./images/img3.jpg">-->
                        <!--<p>无敌单品<span>$20</span></p>-->
                        <!--<span>Shop now <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>-->
                    <!--</a></div>-->
                <!--<div class="clerfix"></div>-->
            <!--</div>-->
        </div>
    </div>

    <!--最热商品-->
    <div class="add-products">
        <h3 class="w3ls-title">热卖商品</h3>
        <div class="container">
            <div v-for="goods in hotGoodsList" class=" w3ls-add-grids">
                <a href="#" @click="toDetail(goods)" @click.prevent="">
                    <img :src="goods.pic">
                    <p>{{goods.goodName}}<span>${{goods.price}}</span></p>
                    <span>Shop now <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>
                </a>
            </div>
            <!--<div class="add-products-row">-->
                <!--<div class=" w3ls-add-grids">-->
                    <!--<a href="goodsDetail.html">-->
                        <!--<img src="./images/img1.jpg">-->
                        <!--<p>无敌单品<span>$20</span></p>-->
                        <!--<span>Shop now <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>-->
                    <!--</a>-->
                <!--</div>-->
                <!--<div class=" w3ls-add-grids">-->
                    <!--<a href="goodsDetail.html">-->
                        <!--<img src="./images/img2.jpg">-->
                        <!--<p>无敌单品<span>$20</span></p>-->
                        <!--<span>Shop now <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>-->
                    <!--</a>-->
                <!--</div>-->
                <!--<div class=" w3ls-add-grids">-->
                    <!--<a href="goodsDetail.html">-->
                        <!--<img src="./images/img3.jpg">-->
                        <!--<p>无敌单品<span>$20</span></p>-->
                        <!--<span>Shop now <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>-->
                    <!--</a>-->

                <!--</div>-->
                <!--<div class=" w3ls-add-grids">-->
                    <!--<a href="goodsDetail.html">-->
                        <!--<img src="./images/img3.jpg">-->
                        <!--<p>无敌单品<span>$20</span></p>-->
                        <!--<span>Shop now <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>-->
                    <!--</a></div>-->
            <!--</div>-->
        </div>
    </div>
    <div class="copy-right">
        <div class="container">
            <p>Copyright &copy; 2020.XB All rights reserved.<a target="_blank" href="#"></a></p>
        </div>
    </div>
</div>
</div>
</body>
<script src="vue/vue-2.6.11.js"></script>
<script src="vue/axios-0.19.2.min.js"></script>
<script src="vue/layer.js"></script>
<script src="myjs/home.js"></script>
</html>